<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script src="../React-js/react.development.js" type="text/javascript"></script>
    <script src="../React-js/react-dom.development.js" type="text/javascript"></script>
    <script src="../React-js/babel.min.js" type="text/javascript"></script>
    <div id="test"></div>
    <script type="text/babel">
        /*
            需求：一个一直循环的文字动画
            并再点击时销毁
        */
       /*
        生命周期：
            1.初始化阶段：由ReactDOM.render()触发 -- 初次渲染
                1. constructor()
                2. componentWillMount()
                3. render()
                4. componentDidMount()===>常用
                    一般用于初始化例如开启定时器，发送网络请求，订阅消息
            2.更新阶段：由组件内部this.setState()或父组件重新render触发
                1. shouldComponentUpdate()
                2. componentWillUpdate()
                3. render()===>常用
                4. componentDidUpdate()
            3.卸载阶段：由ReactDOM.unmountComponentAtNode()触发
                1. componentWillUnmount()===>常用
                    一般用于销毁定时器，取消订阅消息
       */
        class Life extends React.Component{
            state = {
                opacity:1
            }
            destroy = ()=>{
                ReactDOM.unmountComponentAtNode(document.querySelector('#test'))
            }
            componentDidMount(){
                this.timer = setInterval(()=>{
                    let { opacity } = this.state
                    opacity -= 0.1
                    if(opacity<=0){
                        opacity = 1
                    }
                    this.setState({opacity})
                },500)
            }
            componentWillUnmount(){
                clearInterval(this.timer)
            }
            render(){
                return (
                    <div>
                    <h2 style={{opacity:this.state.opacity}}>aaaa</h2>
                    <button onClick={this.destroy}>销毁</button>
                    </div>
                )
            }
        }
        ReactDOM.render(<Life/>,document.querySelector('#test'))
    </script>
</body>
</html>